<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb
          :path="$route.path"
          :title="$route.meta.breadcrumb"
          :startIndex="$route.meta.startIndex"
        >
        </x-breadcrumb>
      </header>
      <div class="search_pd">
        <searchCondition
          :formItemList="[]"
          :emitSearch="false"
          :resetSearch="true"
          @search="search"
          @reset="reset"
          ref="mychild"
        >
          <el-form-item label="是否违规">
            <el-select v-model="selectValue" placeholder="请选择" class="input_num4">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.lable"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序方式">
            <el-select v-model="sortValue" placeholder="请选择" class="input_num4">
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.lable"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
                  class="input_num2"
                    v-model="searchValue"
                    placeholder="请输入"
                  ></el-input>
          </el-form-item>
        </searchCondition>
      </div> 
      <section>
        <div class="decorate"></div>
        <div class="btn_post">
          <el-button icon="el-icon-setting" v-alive @click="addbtn" class="btn-green">违规规则设置</el-button>
          <el-button icon="el-icon-sort"  v-alive @click="oneClearBtn" class="btn-green">一键清空违规</el-button>
        </div>
        <div style="padding: 0 20px">
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            :border="$isborder"
            stripe
            size="mini"
          >
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left">
            </el-table-column>
            <el-table-column
              prop="account"
              label="读者证号"
              :min-width="$widthb"
              show-overflow-tooltip
              align="left"
            >
            </el-table-column>
            <el-table-column
              label="微信昵称"
              prop="nickname"
              :min-width="$widthb"
              align="left"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="微信头像" :width="$widtha" align="left">
              <template slot-scope="scope">
                <div class="dataimg_flex" v-show="scope.row.head_img">
                  <div class="dataImg">
                    <img :src="scope.row.head_img" />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建时间"
              :min-width="$widthb"
              align="left"
            >
            </el-table-column>
            <el-table-column
              prop="score"
              label="积分"
             :min-width="$widths"
              align="left"
            >
            </el-table-column>
            <div v-if="detailData.length > 0">
              <el-table-column
                :prop="item.field+'_violate_num'"
                :label="item.name+'(次)'"
                :min-width="130"
                align="left"
                v-for="(item,index) in detailData"
                :key="index"
              >
              </el-table-column>
            </div>
            <el-table-column label="操作" min-width="260" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div
                    @click="empty(scope.row.id)"
                    class="details-box"
                    v-alive 
                  >
                    清空违规次数
                  </div>
                  <div
                    @click="SetIntegral(scope.row)"
                    class="details-box"
                    v-show="scope.row.account"
                    v-alive 
                  >
                    <span></span> 设置积分
                  </div>
                  <div
                    @click="integralSubsidiary(scope.row)"
                    class="details-box"
                    v-show="scope.row.account"
                    v-alive 
                  >
                    <span></span> 积分明细
                  </div>
                  <div class="more-box" v-if="detailData.length > 0">
                    <el-dropdown
                      trigger="click"
                      placement="bottom-end"
                      @command="handleCommand"
                    >
                      <p class="more-img"></p>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          :command="{
                            type: item,
                            id: scope.row.id,
                          }"
                          v-for="(item,index) in detailData"
                          :key="index"
                           v-alive 
                        >
                          <span class="details-box">{{item.name}}违规详情</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="listTotal"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
          >
          </el-pagination>
          
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>
    <!--违规设置  -->
    <div>
      <el-dialog :visible.sync="dialogVisible2" width="800px">
        <template slot="title">
          <div class="tishi">
            <span>违规设置</span>
          </div>
        </template>
        <div v-for="(item,index) in detailData" :key="index" style="margin-bottom:15px">
          <span class="name-title">{{ item.name }}：</span>
          <el-input-number
            v-model="item.number"
            controls-position="right"
            :min="0"
          ></el-input-number>
          <span class="input-p">违规过期天数：</span>
          <el-input-number
            v-model="item.clear_day"
            controls-position="right"
            :min="0"
          ></el-input-number>
          <el-button class="btn-green inputnum-btn" @click="confirmBtn(item)">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 用户积分设置 -->
    <div>
      <el-dialog :visible.sync="dialogVisible3" width="500px" height="210px">
        <template slot="title">
          <div class="tishi">
            <span>用户积分设置</span>
          </div>
        </template>
        <div class="">
          <div class="setrules_flex">
            <div>
              <span class="setrules_flex_span">用户</span
              ><span>"{{ setfrom.nickname }}"</span
              ><span class="setrules_flex_span">当前拥有积分:</span>
            </div>
            <div class="setrules_flex_score">{{ setfrom.score }}</div>
          </div>
          <div class="setrules_flex">
            <div class="operation">操作</div>
            <div>
              <el-input
                v-model="setfrom.scorenum"
                type="number"
                placeholder="请输入"
                @input="scoreinput"
              ></el-input>
            </div>
          </div>
          <div class="setrules_flex">
            <div class="setrules_flex_scorenum">变更后的积分：</div>
            <div class="flex_scorenum">{{ setfrom.sun }}</div>
          </div>
          <div style="margin-top:20px;">
            <div class="setrules_flex_scorenum" style="margin-bottom:10px">
              变更原因：
            </div>
            <div>
              <el-input
                v-model="setfrom.whyInput"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <button class="btn_add2" @click="issetIntegral">确 定</button>
          <button @click="dialogVisible3 = false" class="can_btn">取 消</button>
        </div>
      </el-dialog>
    </div>
    <!-- 积分明细 -->
    <div>
      <Subsidiary ref="isshow"></Subsidiary>
    </div>
    <!-- 一键清空设置 -->
    <div>
      <OneClearPup ref="isClear" @ongetList='getList'></OneClearPup>
    </div>
    <!-- 违规详情 -->
    <div>
      <ViolationDetail ref="isViolation"></ViolationDetail>
    </div>
  </div>
</template>

<script>
import Subsidiary from './components/integralSubsidiary.vue'
import ViolationDetail from './components/violationDetail.vue'
import OneClearPup from './components/oneClearPup.vue'
export default {
  name: 'AdminIndex',
  components: {
    Subsidiary,
    OneClearPup,
    ViolationDetail
  },
  data() {
    return {
      dialogVisible2: false,
      dialogVisible3: false,
      selectValue: 0,
      searchValue: '',
      sortValue: 0,
      volunteer: 0,
      options: [
        {
          id: 0,
          lable: '全部'
        },
        {
          id: 1,
          lable: '是'
        },
        {
          id: 2,
          lable: '否'
        }
      ],
      options2: [
        {
          id: 0,
          lable: '全部'
        },
        {
          id: 1,
          lable: '默认排序'
        },
        {
          id: 2,
          lable: '积分倒序'
        }
      ],
      options3: [
        {
          id: 0,
          lable: '全部'
        },
        {
          id: 1,
          lable: '是'
        },
        {
          id: 2,
          lable: '否'
        }
      ],
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      emptyid: '',
      setfrom: {
        nickname: '',
        score: '',
        scorenum: '',
        whyInput: '',
        id: '',
        sun: ''
      },
      Subsidiarylist: {},
      detailData:[],
      standbyData:[]
    }
  },

  mounted() {},
  created(){
  },
  activated() {
    if (this.$route.params.action == 'refresh' || this.$isFirstInPage.get()) {
      
      this.page=1
      this.listTotal=0
      this.currentPage1=1
      this.tableData=[]
      this.searchValue = ''
      this.selectValue = 0
      this.sortValue = 0
      this.volunteer = 0
      this.getList()
      this.getDetail()
    }

  },
  methods: {
    async getDetail() {
      try {
        let res = await this.request({
          url: '/admin/violateConfig/detail',
          method: 'get',
          loading: false,
          data: {
          }
        })
        if (res) {
          this.standbyData = res.content
          this.detailData = res.content
        }
      } catch (err) {
        this.standbyData=[]
        this.detailData=[]
        this.errorHandler(err)
      }
    },
    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: '/admin/userInfo/list',
          method: 'get',
          loading: true,
          data: {
            page: this.page,
            limit: 10,
            keywords: this.searchValue,
            is_volunteer: this.volunteer,
            is_violate: this.selectValue,
            sort: this.sortValue
          }
        })
        if (res) {
          this.tableData = res.content.data
          this.listTotal = res.content.total
          // this.currentPage1 = res.content.current_page
        }
      } catch (err) {
        let error = err.message.split('/')
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        console.log(err)
        this.errorHandler(err)
      }
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    search() {
      this.page = 1
      this.getList()
    },
    reset() {
      this.searchValue = ''
      this.selectValue = 0
      this.sortValue = 0
      this.volunteer = 0
      this.page = 1
      this.getList()
    },
    addbtn() {
      if (this.detailData.length > 0) {
        this.detailData = JSON.parse(JSON.stringify(this.standbyData))
        this.dialogVisible2 = true
      }else{
        this.$message.warning('暂无可设置的违规')
      }
    },
    empty(id) {
      this.$refs.isClear.showModal({
        detailData:this.detailData,
        emptyid:id
      })
    },
    //设置积分
    SetIntegral(row) {
      this.setfrom.nickname = row.nickname
      this.setfrom.score = row.score
      this.setfrom.scorenum=""
      this.setfrom.whyInput=""
      this.setfrom.sun=''
      this.setfrom.id = row.account_id
      this.dialogVisible3 = true
    },
    //积分明细
    async integralSubsidiary(row) {
      this.Subsidiarylist = row
      this.$refs.isshow.isshow(row)
    },
    async issetIntegral() {
      try {
        let res = await this.request({
          url: '/admin/scoreInfo/scoreChange',
          method: 'post',
          loading: true,
          data: {
            account_id: this.setfrom.id,
            score: this.setfrom.scorenum,
            reason: this.setfrom.whyInput
          }
        })
        if (res) {
          this.dialogVisible3 = false
             this.$message.success(res.msg)
          let that = this
          setTimeout(() => {
            that.getList()
          }, 2000)
        }
      } catch (err) {
        console.log(err)
        this.errorHandler(err)
      }
    },
    scoreinput() {
      this.setfrom.sun =
        Number(this.setfrom.score) + Number(this.setfrom.scorenum)
    },
    // 点击确认
    async confirmBtn(item){
      const name = item.field
      const clear_day = item.field+'_clear_day'
      let arr = [
        {"colId": item.number,"colName": item.clear_day},
      ]
      let array = JSON.parse(JSON.stringify(arr).replace(/colId/g,name).replace(/colName/g,clear_day))
      
      try {
        let res = await this.request({
         url: '/admin/violateConfig/change',
          method: 'post',
          loading: true,
          data: {
            id: 1,
            ...array[0]
          }
        })
        if (res) {
          this.$message.success(res.msg)
          this.standbyData.map(j => {
            if (j.field==item.field) {
              j.number = item.number
              j.clear_day = item.clear_day
            }
          })
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    // 点击一键清空
    oneClearBtn(){
      this.$refs.isClear.showModal({
        detailData:this.detailData
      })
    },
    /**
     * delete 删除
     * activity  活动管理
     */
    //下拉菜单的触发
    handleCommand(command) {
      this.$refs.isViolation.parentData({
        node: command.type.field,
        name: command.type.name,
        user_id: command.id,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
